<template>
	<div class="header">
		<div class="header-left"><span class="iconfont">&#xe624;</span></div>
		<div class="header-input"><span class="iconfont">&#xe632;</span>输入城市/景点/游玩主题</div>
		<div class="header-right"><router-link to="/city">{{this.city}}<span class="iconfont">&#xe600;</span></router-link> </div>
	</div>
</template>
<script>
import {mapState} from 'vuex'
export default{
	computed:{
		...mapState(['city'])
	}
}
</script>
<style lang="scss" scoped>
@import '~@/assets/styles/base.scss';
.header{
	display: flex;
	height:px2rem(43px);
	line-height:px2rem(43px); 
	background:$bgColor;
	font-size: px2rem(8px);
	color:#fff;
}
.header-left{
	width:px2rem(32px);
	float: left;
	text-align: center;
	
}
.header-left span,.header-input span,.header-right span{
	font-size: px2rem(7px);
}
.header-input span{
	margin-right: px2rem(3px);
}
.header-right span{
	margin-left: px2rem(3px);
}
.header-right{
	min-width:px2rem(62px);
	padding: 0 px2rem(2px);
	float: right;
	text-align: center;
	
}
.header-right a{
	color:#fff;
}
.header-input{
	flex: 1;
	height:px2rem(32px);
	line-height:px2rem(32px);
	margin-left: px2rem(10px);
	background: #fff;
	border-radius:px2rem(5px);
	margin-top:px2rem(6px);
	color:#999;
	padding-left: px2rem(10px)
}
</style>